<template>
  <div class="verification" @click="getFoucs">
    <el-input type="text" v-model="code" @input="changeCode" ref="codeRef" />
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
defineProps<{ code: string }>()
const emits = defineEmits(["update:code"])
const codeRef = ref<HTMLInputElement>()
const code = ref("")

function changeCode(e: string) {
  if (e.length > 4) {
    code.value = code.value.substring(0, 4)
    return;
  }
  const items = document.querySelectorAll(".verification .item")
  for (let index = 0; index < items.length; index++) {
    items[index].innerHTML = code.value[index] ?? ""
  }

  emits('update:code', e)
}


function getFoucs(e: Event) {

  // const items = e.target;
  codeRef.value?.focus();

}

</script>

<style lang="scss" scoped>
.verification {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 20px;

  >.item {
    height: 60px;
    width: 60px;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    border: 1px solid #ccc;
    border-radius: 10px;

  }

  :deep(.el-input) {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
  }

  :deep(.el-input__inner) {
    line-height: 60px;
    text-align: center;
  }
}
</style>